<template>
  <div>
    <div class="dtbox">
      <div id="container"></div>
      <div class="dtdesc">
        <p class="dttit">联系华西</p>
        <p class="hx" @click="mapto([104.062321, 30.64203])">华西医院</p>
        <div class="lx">
          <div>
            <i class="iconfont icon-shouye"></i
            ><span>地址:四川省成都市武侯区国学巷37号</span>
          </div>
          <div>
            <i class="iconfont icon-dayinchuanzhen"></i><span>传真：028-85582944</span>
          </div>
          <div>
            <i class="iconfont icon-24gl-phoneLoudspeaker"></i><span>电话：028-85422114</span>
          </div>
          <div>
            <i class="iconfont icon-youxiang"></i
            ><span>行风办公室信访邮箱： hxyyhfb@163.com</span>
          </div>
          <div>
            <i class="iconfont icon-youxiang"></i
            ><span>纪检监察网络举报平台： sichuan.12388.gov.cn</span>
          </div>
        </div>
        <div class="tit1">
          <div @click="mapto([103.918219,30.722874])">温江院区</div>
           <div @click="mapto([104.068815,30.390321])">华西天府医院</div>
            <div @click="mapto([103.931142,30.781429])">华西上锦医院</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [104.062321, 30.64203]
    }
  },
  methods: {
    mapto(val) {
      this.center = val
    }
  },
  mounted() {
    window._AMapSecurityConfig = {
      securityJsCode: "	e150f8812ba03f814a1a3b94426189f6",
    };
    var map = new AMap.Map("container", {
      zoom: 19, //级别
      center: this.center, //中心点坐标
      viewMode: "3D", //使用3D视图
    });
    //点标记
     var marker = new AMap.Marker({
        position: new AMap.LngLat(104.060465,30.641518),
        title: '华西医院'
      });
      map.add(marker);

  },
  watch: {
    center(newValue, oldValue) {
      var map = new AMap.Map("container", {
      zoom: 19, //级别
      center: this.center, //中心点坐标
      viewMode: "3D", //使用3D视图
    });
    }
  },
};
</script>

<style lang="scss" scoped>
.tit1{
  &>div{padding: 16px 0;border-top: 1px solid #993543;cursor: pointer;}
  font-size: 16px;
}
.lx {
  padding: 13px 0;
  width: 508px;
  height: 223px;
  font-size: 14px;
  i{
    margin-right: 15px;
    font-size: 14px;
  }
  &>div{
    padding: 10px 40px;
    text-align: left;
  }
}
.hx {
  cursor: pointer;
  font-size: 18px;
  padding: 13px;
  margin: 50px 0 30px;
  background-color: #a62941;
}
.dttit {
  padding: 54px 0px 0px;
  font-size: 32px;
}
.dtbox {
  text-align: center;
  color: #fff;
  margin: auto;
  width: 1820px;
  height: 657px;
  position: relative;
}
#container {
  width: 1820px;
  height: 657px;
  margin: 50px auto;
}
.dtdesc {
  left: 1000px;

  bottom: 0;
  position: absolute;
  width: 508px;
  height: 676px;
  background-image: url(/img/index2/dzbsy4-1.jpg);
}
</style>